@noirmd/previewer 2.1.4 → 2.1.5

package/dist/NReditor.cjs

@@ -565,6 +565,22 @@ function parseHtmlAttrs(attrsString) {
 }
 
 // core/parser.ts
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
 function parseMarkdown(markdown2) {
   if (!markdown2) return [];
   const lines = markdown2.replace(/\r\n/g, "\n").replace(/\r/g, "").split("\n");
@@ -578,8 +594,19 @@ function parseMarkdown(markdown2) {
     if (match = trimmed.match(/^(#{1,6})\s+(.+)$/)) {
       const level = match[1].length;
       const rawText = match[2];
-      const { text: text2, classes: classes2, id: customId } = extractAttributes(rawText);
-      const baseId = customId || generateId(text2.replace(/->|<-/g, ""));
+      const { text: rawParsedText, classes: classes2, id: customId } = extractAttributes(rawText);
+      let text2 = rawParsedText;
+      let align;
+      const alignCenter = text2.match(/^->\s*(.+?)\s*<-\s*$/);
+      const alignRight = text2.match(/^->\s*(.+?)\s*->\s*$/);
+      if (alignCenter) {
+        text2 = alignCenter[1];
+        align = "center";
+      } else if (alignRight) {
+        text2 = alignRight[1];
+        align = "right";
+      }
+      const baseId = customId || generateId(text2);
       let id2 = baseId;
       let n = 1;
       while (usedIds.has(id2)) {
@@ -587,7 +614,7 @@ function parseMarkdown(markdown2) {
         id2 = `${baseId}-${n}`;
       }
       usedIds.add(id2);
-      result.push({ type: "header", level, text: text2, id: id2, classes: classes2 || void 0 });
+      result.push({ type: "header", level, text: text2, id: id2, classes: classes2 || void 0, align });
       i++;
       continue;
     }
@@ -763,29 +790,13 @@ function parseMarkdown(markdown2) {
     let tagStartMatch = trimmed.match(/^<([a-zA-Z][\w-]*)/);
     if (tagStartMatch) {
       const tagName = tagStartMatch[1].toLowerCase();
-      const voidElements = /* @__PURE__ */ new Set([
-        "area",
-        "base",
-        "br",
-        "col",
-        "embed",
-        "hr",
-        "img",
-        "input",
-        "link",
-        "meta",
-        "param",
-        "source",
-        "track",
-        "wbr"
-      ]);
       const remainingText = lines.slice(i).join("\n");
       const openTagRegex = new RegExp(`^\\s*<${tagName}\\b([^>]*?)>`, "i");
       const openTagMatch = remainingText.match(openTagRegex);
       if (openTagMatch) {
         const fullOpenTag = openTagMatch[0];
         const attrs = openTagMatch[1].replace(/\s+/g, " ").trim();
-        const isSelfClosing = fullOpenTag.endsWith("/>") || voidElements.has(tagName);
+        const isSelfClosing = fullOpenTag.endsWith("/>") || VOID_ELEMENTS.has(tagName);
         if (isSelfClosing) {
           const blockText = remainingText.substring(0, openTagMatch.index + fullOpenTag.length);
           const consumedLines = blockText.split("\n").length;
@@ -1308,11 +1319,77 @@ function parseInlinePart(part) {
   return document.createTextNode(part);
 }
 
+// vanilla/utils.ts
+var THEME_TOKENS = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "accent",
+  "neutral",
+  "info",
+  "success",
+  "warning",
+  "error"
+]);
+function isThemeToken(color) {
+  return !!color && THEME_TOKENS.has(color);
+}
+function isArbitraryColor(value) {
+  if (THEME_TOKENS.has(value)) return false;
+  if (/^(#|rgb|hsl|oklch|oklab|lab|lch|color\()/i.test(value)) return true;
+  if (/^[a-zA-Z]+$/.test(value)) return true;
+  return false;
+}
+function applyBaseProps(el, props) {
+  if (props.class) {
+    el.classList.add(...props.class.split(/\s+/).filter(Boolean));
+  }
+  if (props.style) {
+    const styles = parseCssString(props.style);
+    for (const [key, value] of Object.entries(styles)) {
+      el.style.setProperty(key, String(value));
+    }
+  }
+}
+function applyFloatStyle(el, float, width) {
+  if (!float) return;
+  if (float === "left" || float === "right") {
+    el.style.float = float;
+    if (!width) el.style.maxWidth = "50%";
+    el.style.marginInlineStart = float === "right" ? "1rem" : "";
+    el.style.marginInlineEnd = float === "left" ? "1rem" : "";
+  } else if (float === "center") {
+    el.style.marginInline = "auto";
+  }
+}
+function applyColor(el, color, classSuffix) {
+  if (!color) return "";
+  if (isThemeToken(color)) {
+    return ` ${classSuffix}--${color}`;
+  }
+  if (isArbitraryColor(color)) {
+    el.style.background = color;
+    el.style.color = "white";
+  }
+  return "";
+}
+function openModal(dialog) {
+  if (!dialog.open) {
+    document.body.appendChild(dialog);
+    dialog.showModal();
+    dialog.addEventListener("close", () => dialog.remove(), { once: true });
+  }
+}
+var IMG_RE = /!\[([^\]]*)\]\(([^)]+)\)/g;
+function parseIntProp(value, defaultValue) {
+  if (!value) return defaultValue;
+  const n = parseInt(value, 10);
+  return Number.isNaN(n) ? defaultValue : n;
+}
+
 // vanilla/directives/admonition.ts
 var admonitionDirective = ({ directiveType, props, renderSlot }) => {
   const el = createAdmonition(directiveType, props.title, props.icon);
-  if (props.class) el.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) el.setAttribute("style", props.style);
+  applyBaseProps(el, props);
   const body = el.querySelector(".nr-admonition__body");
   if (body) {
     body.appendChild(renderSlot("default"));
@@ -1328,8 +1405,7 @@ var detailsDirective = ({ props, renderSlot }) => {
     props.icon,
     props.defaultOpen === "true"
   );
-  if (props.class) el.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) el.setAttribute("style", props.style);
+  applyBaseProps(el, props);
   const body = el.querySelector(".nr-details__body");
   if (body) {
     body.appendChild(renderSlot("default"));
@@ -1342,12 +1418,12 @@ var details_default = detailsDirective;
 var modalDirective = ({ props, renderSlot }) => {
   const label = props.label || props.title || "Open";
   const modalTitle = props.title || "Modal";
-  const customClass = props.class || "";
+  const align = props.align || "left";
   const wrapper = document.createElement("div");
-  wrapper.className = "nr-modal-trigger";
+  wrapper.className = `nr-modal-trigger${align === "center" ? " nr-modal-trigger--center" : align === "right" ? " nr-modal-trigger--right" : ""}`;
   const btn = document.createElement("button");
   btn.className = `nr-button nr-button--default`;
-  if (customClass) btn.classList.add(...customClass.split(/\s+/).filter(Boolean));
+  applyBaseProps(btn, props);
   const icon = props.icon || "open_in_new";
   if (icon) btn.appendChild(createIcon(icon));
   btn.appendChild(document.createTextNode(label));
@@ -1359,15 +1435,7 @@ var modalDirective = ({ props, renderSlot }) => {
     prose.appendChild(renderSlot("default"));
     body.appendChild(prose);
   }
-  btn.addEventListener("click", () => {
-    if (!dialog.open) {
-      document.body.appendChild(dialog);
-      dialog.showModal();
-      dialog.addEventListener("close", () => {
-        dialog.remove();
-      }, { once: true });
-    }
-  });
+  btn.addEventListener("click", () => openModal(dialog));
   wrapper.appendChild(btn);
   wrapper.appendChild(dialog);
   return wrapper;
@@ -1377,19 +1445,20 @@ var modal_default = modalDirective;
 // vanilla/directives/button.ts
 var buttonDirective = ({ props, renderSlot }) => {
   const url = props.url || props.href || "#";
-  const label = props.label;
+  const label = props.label || props.title;
   const icon = props.icon || "near_me";
   const target = props.target || "_blank";
   const customClass = props.class || "";
+  const align = props.align || "left";
   const wrapper = document.createElement("div");
-  wrapper.className = "nr-button-wrap";
+  wrapper.className = `nr-button-wrap${align === "center" ? " nr-button-wrap--center" : align === "right" ? " nr-button-wrap--right" : ""}`;
   if (label) {
     const a = document.createElement("a");
     a.href = url;
     a.target = target;
     a.rel = "noopener noreferrer";
     a.className = "nr-button nr-button--default";
-    if (customClass) a.classList.add(...customClass.split(/\s+/).filter(Boolean));
+    applyBaseProps(a, props);
     a.appendChild(createIcon(icon));
     a.appendChild(document.createTextNode(label));
     wrapper.appendChild(a);
@@ -1400,7 +1469,7 @@ var buttonDirective = ({ props, renderSlot }) => {
   if (links.length > 0) {
     links.forEach((link) => {
       link.classList.add("nr-button", "nr-button--default");
-      if (customClass) link.classList.add(...customClass.split(/\s+/).filter(Boolean));
+      applyBaseProps(link, props);
     });
     wrapper.appendChild(slotContent);
   } else {
@@ -1409,7 +1478,7 @@ var buttonDirective = ({ props, renderSlot }) => {
     a.target = target;
     a.rel = "noopener noreferrer";
     a.className = "nr-button nr-button--default";
-    if (customClass) a.classList.add(...customClass.split(/\s+/).filter(Boolean));
+    applyBaseProps(a, props);
     a.appendChild(createIcon(icon));
     a.appendChild(slotContent);
     wrapper.appendChild(a);
@@ -1432,12 +1501,9 @@ var cardDirective = ({
   const { isSingleCard } = options || {};
   const isModal = directiveType === "card-m";
   const isLink = directiveType === "card-b";
-  const inlineStyles = props.style ? parseCssString(props.style) : {};
   const card = document.createElement("div");
   card.className = `nr-card${isModal || isLink ? " nr-card--interactive" : ""} ${customClass}`.trim();
-  for (const [key, value] of Object.entries(inlineStyles)) {
-    card.style.setProperty(key, String(value));
-  }
+  applyBaseProps(card, props);
   if (image) {
     const imgWrap = document.createElement("div");
     imgWrap.className = `nr-card__image${isSingleCard ? " nr-card__image--tall" : ""}`;
@@ -1516,13 +1582,7 @@ var cardDirective = ({
       prose.appendChild(renderSlot("content") || renderSlot("default"));
       modalBody.appendChild(prose);
     }
-    card.addEventListener("click", () => {
-      if (!dialog.open) {
-        document.body.appendChild(dialog);
-        dialog.showModal();
-        dialog.addEventListener("close", () => dialog.remove(), { once: true });
-      }
-    });
+    card.addEventListener("click", () => openModal(dialog));
     const frag = document.createDocumentFragment();
     frag.appendChild(card);
     frag.appendChild(dialog);
@@ -1570,8 +1630,8 @@ var slideDirective = ({
   if (lines.length === 0) {
     return document.createDocumentFragment();
   }
-  const interval = parseInt(props.interval || "3000", 10);
-  const speed = parseInt(props.speed || "500", 10);
+  const interval = parseIntProp(props.interval, 3e3);
+  const speed = parseIntProp(props.speed, 500);
   const rawClass = props.class || "";
   const inlineStyle = props.style ? parseCssString(props.style) : {};
   const scopeClass = `sld-${++slideCounter}`;
@@ -1622,10 +1682,11 @@ var slideDirective = ({
     }
   });
   if (lines.length > 1) {
-    setInterval(() => {
+    const id = setInterval(() => {
       current = (current + 1) % lines.length;
       track.style.transform = `translateY(${-current * maxH}px)`;
     }, interval);
+    container.dataset.nrIntervalId = String(id);
   }
   return container;
 };
@@ -1635,8 +1696,7 @@ var slide_default = slideDirective;
 var keysDirective = ({ props, slots }) => {
   const wrap = document.createElement("div");
   wrap.className = "nr-keys";
-  if (props.class) wrap.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) wrap.setAttribute("style", props.style);
+  applyBaseProps(wrap, props);
   const sizeClass = props.size ? ` nr-kbd--${props.size}` : "";
   const parts = (slots.default || "").split("+").map((p) => p.trim()).filter(Boolean);
   parts.forEach((part, i) => {
@@ -1660,8 +1720,7 @@ var accordionCounter = 0;
 var accordionItemDirective = ({ props, renderSlot }) => {
   const item = document.createElement("div");
   item.className = "nr-accordion__item";
-  if (props.class) item.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) item.setAttribute("style", props.style);
+  applyBaseProps(item, props);
   const input = document.createElement("input");
   input.type = "radio";
   input.className = "nr-accordion__input";
@@ -1680,8 +1739,7 @@ var accordionItemDirective = ({ props, renderSlot }) => {
 var accordionDirective = ({ props, renderSlot }) => {
   const wrap = document.createElement("div");
   wrap.className = "nr-accordion";
-  if (props.class) wrap.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) wrap.setAttribute("style", props.style);
+  applyBaseProps(wrap, props);
   wrap.appendChild(renderSlot("default"));
   const mode = props.mode === "checkbox" ? "checkbox" : "radio";
   const group = `nr-acc-${++accordionCounter}`;
@@ -1694,7 +1752,6 @@ var accordionDirective = ({ props, renderSlot }) => {
 var accordion_default = accordionDirective;
 
 // vanilla/directives/carousel.ts
-var IMG_RE = /!\[([^\]]*)\]\(([^)]+)\)/g;
 var carouselDirective = ({ props, slots }) => {
   const images = [];
   const raw = slots.default || "";
@@ -1710,19 +1767,9 @@ var carouselDirective = ({ props, slots }) => {
   wrap.className = "nr-carousel";
   wrap.tabIndex = 0;
   wrap.setAttribute("aria-label", "Image carousel");
-  if (props.class) wrap.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) wrap.setAttribute("style", props.style);
+  applyBaseProps(wrap, props);
   if (props.width) wrap.style.width = props.width;
-  if (props.float) {
-    if (props.float === "left" || props.float === "right") {
-      wrap.style.float = props.float;
-      if (!props.width) wrap.style.maxWidth = "50%";
-      wrap.style.marginInlineStart = props.float === "right" ? "1rem" : "";
-      wrap.style.marginInlineEnd = props.float === "left" ? "1rem" : "";
-    } else if (props.float === "center") {
-      wrap.style.marginInline = "auto";
-    }
-  }
+  applyFloatStyle(wrap, props.float, props.width);
   const viewport = document.createElement("div");
   viewport.className = "nr-carousel__viewport";
   if (props.height) viewport.style.height = props.height;
@@ -1792,11 +1839,10 @@ var DEFAULT_LABELS = ["days", "hours", "min", "sec"];
 var countdownDirective = ({ props }) => {
   const wrap = document.createElement("div");
   wrap.className = "nr-countdown";
-  if (props.class) wrap.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) wrap.setAttribute("style", props.style);
+  applyBaseProps(wrap, props);
   const labelParts = (props.labels || "").split("|").map((s) => s.trim());
   const labels = DEFAULT_LABELS.map((label, i) => labelParts[i] || label);
-  const digits = parseInt(props.digits || "2", 10);
+  const digits = parseIntProp(props.digits, 2);
   const targetTime = props.target ? new Date(props.target).getTime() : NaN;
   const hasTarget = !Number.isNaN(targetTime);
   const blocks = [];
@@ -1843,13 +1889,15 @@ var countdownDirective = ({ props }) => {
     blocks.push({ value });
   });
   render();
-  if (hasTarget) setInterval(render, 1e3);
+  if (hasTarget) {
+    const id = setInterval(render, 1e3);
+    wrap.dataset.nrIntervalId = String(id);
+  }
   return wrap;
 };
 var countdown_default = countdownDirective;
 
 // vanilla/directives/diff.ts
-var IMG_RE2 = /!\[([^\]]*)\]\(([^)]+)\)/g;
 var diffDirective = ({ props, slots }) => {
   let before = (props.before || "").split("#")[0].trim();
   let after = (props.after || "").split("#")[0].trim();
@@ -1857,8 +1905,8 @@ var diffDirective = ({ props, slots }) => {
     const urls = [];
     const raw = slots.default || "";
     let m;
-    IMG_RE2.lastIndex = 0;
-    while ((m = IMG_RE2.exec(raw)) !== null) {
+    IMG_RE.lastIndex = 0;
+    while ((m = IMG_RE.exec(raw)) !== null) {
       urls.push(m[2].split("#")[0].trim());
     }
     if (!before && urls.length > 0) before = urls[0];
@@ -1871,21 +1919,11 @@ var diffDirective = ({ props, slots }) => {
   figure.className = "nr-diff";
   figure.tabIndex = 0;
   figure.setAttribute("aria-label", "Image comparison slider");
-  if (props.class) figure.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) figure.setAttribute("style", props.style);
+  applyBaseProps(figure, props);
   if (props.aspect) figure.style.aspectRatio = props.aspect;
   if (props.height) figure.style.height = props.height;
   if (props.width) figure.style.width = props.width;
-  if (props.float) {
-    if (props.float === "left" || props.float === "right") {
-      figure.style.float = props.float;
-      if (!props.width) figure.style.maxWidth = "50%";
-      figure.style.marginInlineStart = props.float === "right" ? "1rem" : "";
-      figure.style.marginInlineEnd = props.float === "left" ? "1rem" : "";
-    } else if (props.float === "center") {
-      figure.style.marginInline = "auto";
-    }
-  }
+  applyFloatStyle(figure, props.float, props.width);
   const beforeItem = document.createElement("div");
   beforeItem.className = "nr-diff__item nr-diff__item--before";
   beforeItem.setAttribute("role", "img");
@@ -1948,8 +1986,7 @@ var diff_default = diffDirective;
 var hover3dDirective = ({ props, renderSlot }) => {
   const container = document.createElement("div");
   container.className = "nr-hover-3d";
-  if (props.class) container.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) container.setAttribute("style", props.style);
+  applyBaseProps(container, props);
   const stage = document.createElement("div");
   stage.className = "nr-hover-3d__stage";
   stage.appendChild(renderSlot("default"));
@@ -1962,14 +1999,13 @@ var hover3dDirective = ({ props, renderSlot }) => {
 var hover3d_default = hover3dDirective;
 
 // vanilla/directives/hovergallery.ts
-var IMG_RE3 = /!\[([^\]]*)\]\(([^)]+)\)/g;
 var MAX_IMAGES = 10;
 var hovergalleryDirective = ({ props, slots }) => {
   const images = [];
   const raw = slots.default || "";
   let m;
-  IMG_RE3.lastIndex = 0;
-  while ((m = IMG_RE3.exec(raw)) !== null) {
+  IMG_RE.lastIndex = 0;
+  while ((m = IMG_RE.exec(raw)) !== null) {
     images.push({ src: m[2].split("#")[0].trim(), alt: m[1].trim() || "gallery image" });
   }
   if (images.length === 0) {
@@ -1978,9 +2014,8 @@ var hovergalleryDirective = ({ props, slots }) => {
   const count = Math.min(images.length, MAX_IMAGES);
   const figure = document.createElement("figure");
   figure.className = "nr-hover-gallery";
+  applyBaseProps(figure, props);
   if (props.aspect) figure.style.aspectRatio = props.aspect;
-  if (props.class) figure.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) figure.setAttribute("style", (figure.getAttribute("style") || "") + ";" + props.style);
   const imgEls = [];
   for (let i = 0; i < count; i++) {
     const el = document.createElement("img");
@@ -2030,28 +2065,11 @@ var hovergalleryDirective = ({ props, slots }) => {
 var hovergallery_default = hovergalleryDirective;
 
 // vanilla/directives/chat.ts
-var CHAT_THEME_TOKENS = /* @__PURE__ */ new Set([
-  "primary",
-  "secondary",
-  "accent",
-  "neutral",
-  "info",
-  "success",
-  "warning",
-  "error"
-]);
-function isArbitraryColor(value) {
-  if (CHAT_THEME_TOKENS.has(value)) return false;
-  if (/^(#|rgb|hsl|oklch|oklab|lab|lch|color\()/i.test(value)) return true;
-  if (/^[a-zA-Z]+$/.test(value)) return true;
-  return false;
-}
 var chatItemDirective = ({ props, renderSlot }) => {
   const side = props.side === "end" ? "end" : "start";
   const wrap = document.createElement("div");
   wrap.className = `nr-chat nr-chat--${side}`;
-  if (props.class) wrap.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) wrap.setAttribute("style", props.style);
+  applyBaseProps(wrap, props);
   const header = document.createElement("div");
   header.className = "nr-chat__header";
   if (props.name) {
@@ -2076,14 +2094,8 @@ var chatItemDirective = ({ props, renderSlot }) => {
     avatar.appendChild(img);
     wrap.appendChild(avatar);
   }
-  const isThemeToken = CHAT_THEME_TOKENS.has(props.color || "");
-  const colorClass = isThemeToken ? ` nr-chat__bubble--${props.color}` : "";
   const bubble = document.createElement("div");
-  bubble.className = `nr-chat__bubble${colorClass}`;
-  if (props.color && isArbitraryColor(props.color) && !isThemeToken) {
-    bubble.style.background = props.color;
-    bubble.style.color = "white";
-  }
+  bubble.className = `nr-chat__bubble${applyColor(bubble, props.color, "nr-chat__bubble")}`;
   bubble.appendChild(renderSlot("default"));
   wrap.appendChild(bubble);
   if (props.footer) {
@@ -2097,8 +2109,7 @@ var chatItemDirective = ({ props, renderSlot }) => {
 var chatDirective = ({ props, renderSlot }) => {
   const wrap = document.createElement("div");
   wrap.className = "nr-chat";
-  if (props.class) wrap.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) wrap.setAttribute("style", props.style);
+  applyBaseProps(wrap, props);
   wrap.appendChild(renderSlot("default"));
   return wrap;
 };
@@ -2134,8 +2145,7 @@ function bindEventProp(el, eventProp) {
 var richlistItemDirective = ({ props, renderSlot }) => {
   const li = document.createElement("li");
   li.className = "nr-richlist__item";
-  if (props.class) li.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) li.setAttribute("style", props.style);
+  applyBaseProps(li, props);
   if (props.image) {
     const thumb = document.createElement("div");
     thumb.className = "nr-richlist__thumb";
@@ -2197,36 +2207,20 @@ var richlistItemDirective = ({ props, renderSlot }) => {
 var richlistDirective = ({ props, renderSlot }) => {
   const ul = document.createElement("ul");
   ul.className = "nr-richlist";
-  if (props.class) ul.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) ul.setAttribute("style", props.style);
+  applyBaseProps(ul, props);
   ul.appendChild(renderSlot("default"));
   return ul;
 };
 var richlist_default = richlistDirective;
 
 // vanilla/directives/stat.ts
-var STAT_THEME_TOKENS = /* @__PURE__ */ new Set([
-  "primary",
-  "secondary",
-  "info",
-  "success",
-  "warning",
-  "error"
-]);
-function isArbitraryColor2(value) {
-  if (STAT_THEME_TOKENS.has(value)) return false;
-  if (/^(#|rgb|hsl|oklch|oklab|lab|lch|color\()/i.test(value)) return true;
-  if (/^[a-zA-Z]+$/.test(value)) return true;
-  return false;
-}
 var statDirective = ({ props }) => {
-  const isThemeToken = STAT_THEME_TOKENS.has(props.color || "");
-  const colorClass = isThemeToken ? ` nr-stat--${props.color}` : "";
+  const statIsThemeToken = isThemeToken(props.color);
+  const colorClass = statIsThemeToken ? ` nr-stat--${props.color}` : "";
   const stat = document.createElement("div");
   stat.className = `nr-stat${colorClass}`;
-  if (props.class) stat.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) stat.setAttribute("style", props.style);
-  const useInlineColor = props.color && isArbitraryColor2(props.color) && !isThemeToken;
+  applyBaseProps(stat, props);
+  const useInlineColor = props.color && isArbitraryColor(props.color) && !statIsThemeToken;
   if (props.icon) {
     const figure = document.createElement("div");
     figure.className = "nr-stat__figure";
@@ -2319,9 +2313,12 @@ function renderHtmlString(html) {
   processedContent = processedContent.replace(
     /<style(?:\s+[^>]*)?>([\s\S]*?)<\/style>/gi,
     (_match, cssContent) => {
+      const trimmed = cssContent.trim();
+      const existing = document.head.querySelector("style[data-nr-global]");
+      if (existing && existing.textContent === trimmed) return "";
       const styleEl = document.createElement("style");
       styleEl.setAttribute("data-nr-global", "");
-      styleEl.textContent = cssContent;
+      styleEl.textContent = trimmed;
       document.head.appendChild(styleEl);
       return "";
     }
@@ -2391,19 +2388,14 @@ function renderElement(element, ctx, allElements) {
   switch (element.type) {
     case "header": {
       const tag = `h${element.level}`;
-      let text = element.text;
-      const alignCenter = text.match(/^->\s*(.+?)\s*<-\s*$/);
-      const alignRight = text.match(/^->\s*(.+?)\s*->\s*$/);
-      if (alignCenter) text = alignCenter[1];
-      else if (alignRight) text = alignRight[1];
       const h = document.createElement(tag);
       h.id = element.id;
       let cls = `md-h${element.level}`;
-      if (alignCenter) cls += " text-center";
-      if (alignRight) cls += " text-right";
+      if (element.align === "center") cls += " text-center";
+      else if (element.align === "right") cls += " text-right";
       if (element.classes) cls += ` ${element.classes}`;
       h.className = cls;
-      h.appendChild(renderInline(text));
+      h.appendChild(renderInline(element.text));
       return h;
     }
     case "paragraph": {
@@ -2771,7 +2763,7 @@ var guideData = [
     "title": "Modal",
     "icon": "open_in_full",
     "order": 2,
-    "md": '# Modal\n\nLa directiva `:::modal` crea un **di\xE1logo modal** con su bot\xF3n de apertura.\n\n## Sintaxis\n\n```md\n:::modal {title="Confirmar borrado" label="Abrir modal" icon="delete"}\n\xBFSeguro que quieres borrar este documento? Esta acci\xF3n no se puede deshacer.\n\n| Acci\xF3n | Efecto |\n| --- | --- |\n| Aceptar | Borra el documento |\n| Cancelar | No hace nada |\n:::\n```\n\n:::modal {title="Confirmar borrado" label="Abrir modal" icon="delete"}\n\xBFSeguro que quieres borrar este documento? Esta acci\xF3n no se puede deshacer.\n\n| Acci\xF3n | Efecto |\n| --- | --- |\n| Aceptar | Borra el documento |\n| Cancelar | No hace nada |\n:::\n\n## Contenido enriquecido\n\n```md\n:::modal {title="Notas de la versi\xF3n" label="Ver novedades" icon="new_releases"}\n**v2.0** \u2014 cambios principales:\n\n- Nuevo componente `:::diff`\n- Gu\xEDa integrada en el editor\n- Especificidad CSS corregida en im\xE1genes\n:::\n```\n\n:::modal {title="Notas de la versi\xF3n" label="Ver novedades" icon="new_releases"}\n**v2.0** \u2014 cambios principales:\n\n- Nuevo componente `:::diff`\n- Gu\xEDa integrada en el editor\n- Especificidad CSS corregida en im\xE1genes\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T\xEDtulo del modal |\n| `label` | texto | Texto del bot\xF3n de apertura (default: `title` o \xABOpen\xBB) |\n| `icon` | nombre Material | Icono del bot\xF3n (default `open_in_new`) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Interacci\xF3n\n\n- **Bot\xF3n**: abre el modal (focus se mueve dentro).\n- **Overlay** o bot\xF3n **\xD7**: cierra.\n- **Esc**: cierra (en desktop).\n- `dialog` nativo \u2192 accesible por defecto, focus trapped y `inert` al fondo.'
+    "md": '# Modal\n\nLa directiva `:::modal` crea un **di\xE1logo modal** con su bot\xF3n de apertura.\n\n## Sintaxis\n\n```md\n:::modal {title="Confirmar borrado" label="Abrir modal" icon="delete"}\n\xBFSeguro que quieres borrar este documento? Esta acci\xF3n no se puede deshacer.\n\n| Acci\xF3n | Efecto |\n| --- | --- |\n| Aceptar | Borra el documento |\n| Cancelar | No hace nada |\n:::\n```\n\n:::modal {title="Confirmar borrado" label="Abrir modal" icon="delete"}\n\xBFSeguro que quieres borrar este documento? Esta acci\xF3n no se puede deshacer.\n\n| Acci\xF3n | Efecto |\n| --- | --- |\n| Aceptar | Borra el documento |\n| Cancelar | No hace nada |\n:::\n\n## Contenido enriquecido\n\n```md\n:::modal {title="Notas de la versi\xF3n" label="Ver novedades" icon="new_releases"}\n**v2.0** \u2014 cambios principales:\n\n- Nuevo componente `:::diff`\n- Gu\xEDa integrada en el editor\n- Especificidad CSS corregida en im\xE1genes\n:::\n```\n\n:::modal {title="Notas de la versi\xF3n" label="Ver novedades" icon="new_releases"}\n**v2.0** \u2014 cambios principales:\n\n- Nuevo componente `:::diff`\n- Gu\xEDa integrada en el editor\n- Especificidad CSS corregida en im\xE1genes\n:::\n\n## Alineaci\xF3n del bot\xF3n\n\nEl bot\xF3n de apertura se alinea a la izquierda por defecto. Usa el prop `align` para cambiar la alineaci\xF3n:\n\n### Centrado\n\n```md\n:::modal {title="Centrado" label="Abrir" icon="open_in_full" align="center"}\nContenido del modal centrado.\n:::\n```\n\n:::modal {title="Centrado" label="Abrir" icon="open_in_full" align="center"}\nContenido del modal centrado.\n:::\n\n### Alineado a la derecha\n\n```md\n:::modal {title="Derecha" label="Abrir" icon="open_in_full" align="right"}\nContenido del modal alineado a la derecha.\n:::\n```\n\n:::modal {title="Derecha" label="Abrir" icon="open_in_full" align="right"}\nContenido del modal alineado a la derecha.\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T\xEDtulo del modal |\n| `label` (o `title`) | texto | Texto del bot\xF3n de apertura (`title` funciona como alias, default: \xABOpen\xBB) |\n| `icon` | nombre Material | Icono del bot\xF3n (default `open_in_new`) |\n| `align` | `left` / `center` / `right` | Alineaci\xF3n del bot\xF3n de apertura (default `left`) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Interacci\xF3n\n\n- **Bot\xF3n**: abre el modal (focus se mueve dentro).\n- **Overlay** o bot\xF3n **\xD7**: cierra.\n- **Esc**: cierra (en desktop).\n- `dialog` nativo \u2192 accesible por defecto, focus trapped y `inert` al fondo.'
   },
   {
     "id": "button",
@@ -2779,7 +2771,7 @@ var guideData = [
     "title": "Button",
     "icon": "touch_app",
     "order": 3,
-    "md": '# Button\n\nLa directiva `:::button` crea un **bot\xF3n con enlace** (se abre en pesta\xF1a nueva por defecto).\n\n## Sintaxis\n\n```md\n:::button {label="Documentaci\xF3n" url="https://example.com" icon="menu_book"}\n:::\n```\n\n:::button {label="Documentaci\xF3n" url="https://example.com" icon="menu_book"}\n:::\n\n## Variante con enlace interno\n\n```md\n:::button {label="Ir a la p\xE1gina de notas" url="#admonici\xF3n-nota" icon="sticky_note_2" target="_self"}\n:::\n```\n\n:::button {label="Ir a la p\xE1gina de notas" url="#admonici\xF3n-nota" icon="sticky_note_2" target="_self"}\n:::\n\n## Con contenido markdown\n\nSi el bloque contiene texto/enlaces, se renderizan dentro del bot\xF3n:\n\n```md\n:::button {label="Descargar" url="https://example.com/download" icon="download"}\nDescarga el **manual** en PDF\n:::\n```\n\n:::button {label="Descargar" url="https://example.com/download" icon="download"}\nDescarga el **manual** en PDF\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `label` | texto | Texto del bot\xF3n |\n| `url` (o `href`) | URL | Destino del enlace (default `#`) |\n| `icon` | nombre Material | Icono (default `near_me`) |\n| `target` | `_blank` / `_self` / ... | Destino del enlace (default `_blank`) |\n| `class` | texto | Clases CSS adicionales |'
+    "md": '# Button\n\nLa directiva `:::button` crea un **bot\xF3n con enlace** (se abre en pesta\xF1a nueva por defecto).\n\n## Sintaxis\n\n```md\n:::button {label="Documentaci\xF3n" url="https://example.com" icon="menu_book"}\n:::\n```\n\n:::button {label="Documentaci\xF3n" url="https://example.com" icon="menu_book"}\n:::\n\n## Variante con enlace interno\n\n```md\n:::button {label="Ir a la p\xE1gina de notas" url="#admonici\xF3n-nota" icon="sticky_note_2" target="_self"}\n:::\n```\n\n:::button {label="Ir a la p\xE1gina de notas" url="#admonici\xF3n-nota" icon="sticky_note_2" target="_self"}\n:::\n\n## Con contenido markdown\n\nSi el bloque contiene texto/enlaces, se renderizan dentro del bot\xF3n:\n\n```md\n:::button {label="Descargar" url="https://example.com/download" icon="download"}\nDescarga el **manual** en PDF\n:::\n```\n\n:::button {label="Descargar" url="https://example.com/download" icon="download"}\nDescarga el **manual** en PDF\n:::\n\n## Alineaci\xF3n\n\nLos botones se alinean a la izquierda por defecto. Usa el prop `align` para cambiar la alineaci\xF3n:\n\n### Centrado\n\n```md\n:::button {label="Centrado" url="https://example.com" icon="center_focus_strong" align="center"}\n:::\n```\n\n:::button {label="Centrado" url="https://example.com" icon="center_focus_strong" align="center"}\n:::\n\n### Alineado a la derecha\n\n```md\n:::button {label="Derecha" url="https://example.com" icon="arrow_forward" align="right"}\n:::\n```\n\n:::button {label="Derecha" url="https://example.com" icon="arrow_forward" align="right"}\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `label` (o `title`) | texto | Texto del bot\xF3n (`title` funciona como alias por compatibilidad) |\n| `url` (o `href`) | URL | Destino del enlace (default `#`) |\n| `icon` | nombre Material | Icono (default `near_me`) |\n| `target` | `_blank` / `_self` / ... | Destino del enlace (default `_blank`) |\n| `align` | `left` / `center` / `right` | Alineaci\xF3n del bot\xF3n (default `left`) |\n| `class` | texto | Clases CSS adicionales |'
   },
   {
     "id": "slide",